<template>
  <div class="hotpage">
    <!-- 标题 -->
    <div class="hotpage-title">
      <div class="hotpage-title__name">热点报告</div>
      <div class="hotpage-title__right">
        <div class="hotpage-title__temp" @click="changSortName">
          <div class="hotpage-title__temp-name">报告名称</div>
          <img
          :src="desc === false && sortBy === 1 ? nameSort.img1 : nameSort.img2"
            class="hotpage-title__temp-cion"
          />
        </div>
        <div class="hotpage-title__temp" @click="changSortCreate">
          <div class="hotpage-title__temp-name">创建时间</div>
          <img
          :src="desc === false && sortBy === 2 ? dateSort.img1 : dateSort.img2"
            class="hotpage-title__temp-cion"
          />
        </div>
        <div class="hotpage-title__temp" @click="changSortUpdate">
          <div class="hotpage-title__temp-name">更新时间</div>
          <img
          :src="desc === false && sortBy === 3 ? uploadSort.img1 : uploadSort.img2"
            class="hotpage-title__temp-cion"
          />
        </div>
        <el-input
          class="hotpage-title__temp-ipt"
          suffix-icon="el-icon-search"
          v-model="name"
          placeholder="请输入报告名称"
          @change="getreportList"
        ></el-input>
      </div>
    </div>
    <div class="hotpage-content">
      <div
        class="hotpage-content-temp"
        v-for="item in fileDataList"
        @click.stop="handView(item)"
        :key="item.id"
      >
        <div
          class="analyzepage-content-add"
          v-if="item.name === 'init'"
          @click.stop="handAdd()"
          style="min-height: 180px;"
        >
          <img src="./assets/images/plus.png" alt="" />
          <div>创建热点报告</div>
        </div>
        <div class="hotpage-content-item" v-else >
          <div class="hotpage-content-item-name" style="display: flex;gap: 8px;">
            <el-tag type="success" size="mini">公有</el-tag>
            {{ item.name }}
          </div>
          <div class="hotpage-content-item-content">{{ item.description }}</div>
          <!-- <div class="hotpage-content-item-count">
            <div>节点数:{{ item.nodeNum }}</div>
            <div>共收录:{{ item.collectNum }}</div>
          </div> -->
          <!-- <div class="hotpage-content-item-subject">智能农业</div> -->
          <div class="hotpage-content-item-date">
            <div class="hotpage-content-item-date-left">
              <img src="./assets/images/date.png" alt="" />
              <div>
                {{ item.createTime }}
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { listPublicReport, delreport, addreport,editreport } from "@/api/modules/report";
import dateUtils from "../../utils/dateUtils.js";
import { listHotPublicReport } from "@/api/modules/login";
export default {
  name: "HotPage",
  data() {
    return {
      nameSort: {
        sort: "des",
        img1: require("./assets/images/sort-a.png"),
        img2: require("./assets/images/sort-z.png"),
      },
      dateSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      uploadSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      fileDataList: [],
      // ishotpage: false,
      // isUpload: false,
      name: "",
      
      select_id: "",
      closeShow: false,
      change_show: false,
      isanalyzepage: false,
      radio: "1",
      collectNum: "",
      nodeNum: "",
      desc: true,
      sortBy: "",
    };
  },
  mounted() {
    // this.searchVal = this.$route.query.searchVal; //获取首页搜索框传递过来的搜索内容
    
    // if(this.searchVal && this.searchVal != ''){
    //   this.listHotPublicReportHanlde();// 获取首页搜索框传递过来的热点报告
    // }else{
    //   this.getreportList();
    // }
    this.getreportList();
  },
  methods: {
    // 获取首页搜索框传递过来的热点报告
    listHotPublicReportHanlde() {
      listHotPublicReport({
        name:this.searchVal
      }).then((res) => {
        if (res.code == 200) {
            this.fileDataList = res.data;//截取前4条数据
          } else {
            this.$message({
              message: res.msg,
              type: "error",
              showClose: true,
            });
          }
      });
    },
    changSortName(){
      this.sortBy = 1;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getreportList()
    },
     changSortCreate(){
      this.sortBy = 2;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getreportList()
    },
     changSortUpdate(){
      this.sortBy = 3;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getreportList()
    },
    
    handAdd() {
      this.isanalyzepage = true;
    },


    getreportList() {
      listPublicReport({
         name:this.name,
         desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
      }).then((res) => {
        if (res.code == 200) {
          this.fileDataList = res.rows;
          // this.fileDataList.push({
          //   name: "init",
          //   id: "1",
          // });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },

    // 参看报告
    handView(item) {
      this.$router.push({
        path: "/viewreport",
        query: {
          reportId: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss">
// 样式覆盖
.analyzepage-dialog {
  .el-dialog__header {
    padding: 24px;
  }
  .el-dialog__body {
    padding: 0 24px;
  }
  .el-dialog__footer {
    padding: 24px;
  }
  .analyzepage-dialog__body {
    .analyzepage-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      height: 46px;
      margin-bottom: 24px;
      &:last-child {
        margin-bottom: 0 !important;
      }
      & > div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }
      .analyzepage-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }
    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;
      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }
      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }
      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }
      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }
      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }
      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}
// 样式覆盖
.hotpage-dialog {
  .el-dialog__header {
    padding: 24px;
  }
  .el-dialog__body {
    padding: 0 24px;
  }
  .el-dialog__footer {
    padding: 24px;
  }
  .hotpage-dialog__body {
    .hotpage-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      height: 46px;
      margin-bottom: 24px;
      &:last-child {
        margin-bottom: 0 !important;
      }
      & > div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }
      .hotpage-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }
    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;
      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }
      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }
      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }
      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }
      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }
      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hotpage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  .hotpage-title {
    height: 46px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .hotpage-title__name {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #313131;
      line-height: 23px;
    }
    .hotpage-title__temp {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 24px;
      margin-right: 24px;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      .hotpage-title__temp-name {
        margin-right: 4px;
        width: fit-content;
        height: 24px;
        white-space: nowrap;
      }
      .hotpage-title__temp-cion {
        width: 16px;
        height: 16px;
      }
    }
    .hotpage-title__right {
      display: flex;
      align-items: center;
      padding-right: 28px;
    }
    .hotpage-title__temp-ipt {
      width: 300px;
    }
    .hotpage-title__temp-btn {
      margin-left: 24px;
    }
  }
  .hotpage-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;
    .hotpage-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;
      // min-height: 200px;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 8px 8px 0px rgba(76, 86, 187, 0.05);
      }
    }
    .analyzepage-content-add {
      padding: 24px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
      
    }
    .hotpage-content-item {
      padding: 24px;
      box-sizing: border-box;
      .hotpage-content-item-name {
        // height: 15px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 21px;
        width: auto;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        & > div {
          width: 40px;
          height: 20px;
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid #11a75c;
          margin-right: 4px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #11a75c;
          line-height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .hotpage-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .hotpage-content-item-subject {
        width: fit-content !important;
        height: 24px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #c6caff;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 20px;
        padding: 2px 8px;
        box-sizing: border-box;
        margin-bottom: 14px;
      }
      .hotpage-content-item-content {
        height: 72px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        margin-bottom: 16px;
      }
      .hotpage-content-item-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;

        .hotpage-content-item-date-left {
          display: flex;
          align-items: center;
          & > img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
        .hotpage-content-item-date-right {
          display: flex;
          align-items: center;
          & > i {
            font-size: 16px;
            margin-right: 4px;
          }
        }
        
      }
      .hotpage-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }
      .analyzepage-content-add {
        width: 100%;
        height: 100%;
        padding: 24px;
      box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 20px;
        background: #000;
      }
      .hotpage-content-item-btm {
        display: flex;
        .hotpage-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;
          .hotpage-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }
        .hotpage-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          & > img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
